<template>
  <div class="hello">
    <hot-table
      :language="language"
      :settings="hotSettings"
      ref="table"
      style="margin-bottom: 20px"
    ></hot-table>
    <hot-table
      :language="language"
      :settings="hot"
      ref="table"
      style="margin-bottom: 20px"
    ></hot-table>
  </div>
</template>

<script>
import { HotTable } from '@handsontable/vue'
// import Handsontable from 'handsontable'

export default {
  name: 'HelloWorld',
  components: {
    HotTable
  },
  data () {
    return {
      fileList: [],
      hotSettings: {
        // data: Handsontable.helper.createSpreadsheetData(20, 20),
        data: [
          ['1', '派驻纪检组', '查看  配置 '],
          ['2', '办公厅', '查看  配置 '],
          ['3', '人力部', '查看  配置 '],
          ['4', '战略部', '查看  配置 '],
          ['5', '投资与重组部', '查看  配置 '],
          ['6', '协同发展部及雄安办', '查看  配置 '],
          ['7', '风险部', '查看  配置 '],
          ['8', '审计部', '查看  配置 '],
          ['9', '审计中心', '查看  配置 '],
          ['10', '党群部', '查看  配置 '],
          ['11', '企业文化部', '查看  配置 '],
          ['12', '巡视办', '查看  配置 '],
          ['13', '总部机关党委', '查看  配置 '],
          ['14', '深改办', '查看  配置 '],
          ['15', '扶贫办', '查看  配置 '],
          ['16', '科创部', '查看  配置 '],
          ['17', '上市办', '查看  配置 '],
          ['18', '集团领导', '查看  配置 '],
          ['19', '集团高管', '查看  配置 '],
          ['20', '东京代表处', '查看  配置 '],
          ['21', '澳门代表处', '查看  配置 ']
        ],
        fixedRowsTop: 1, // 固定顶部x行不能垂直滚动
        fixedColumnsLeft: 1, // 固定顶部x行不能垂直滚动
        colHeaders: ['部门编码', '部门名称', '操作'], // 列标题
        rowHeaders: true, // 列标题
        stretchH: 'all',
        stretchW: 'all',
        manualColumnMove: true, // 可拖动
        manualRowMove: true,
        autoColumnSize: true,
        manualColumnResize: true, // 可自定义列宽
        manualRowResize: true, // 可自定义行宽
        manualRowFreeze: true, // 可手动固定某一行
        manualColumnFreeze: true, // 可手动固定某一列
        height: '500', // 表格高度
        width: '500', // 表格宽度
        // colWidths: 90, // 列宽
        // columns: [
        //   {
        //     wordWrap: true
        //   }
        // ],
        contextMenu: true,
        currentRowClassName: '测试',
        fillHandle: 'vertical',
        licenseKey: 'non-commercial-and-evaluation',
        columnSorting: false,
        renderAllRows: false,
        startRows: 15,
        mergeCells: true
      },
      hot: {
        // data: Handsontable.helper.createSpreadsheetData(20, 20),
        data: [
          ['002001007002', '部门误餐费', '√'],
          ['010', '业务招待费', '√'],
          ['011', '差旅费', '□'],
          ['011001', '国内差旅费', '□'],
          ['011002', '出国境差旅费', '□'],
          ['013001', '会议场租费', '√'],
          ['013002', '会议住宿费', '√'],
          ['013003', '会议餐饮费', '□ '],
          ['013004', '会议讲课费', '□ '],
          ['013005', '会议杂费', '√'],
          ['015', '办公费用', '√'],
          ['015001', '印刷费', '√'],
          ['015002002', '部门报刊资料费', '√'],
          ['015003002', '部门办公用品采购', '□ '],
          ['015006', '维修费', '√ '],
          ['015007', '其他办公费', '√']
        ],
        fixedRowsTop: 1, // 固定顶部x行不能垂直滚动
        fixedColumnsLeft: 1, // 固定顶部x行不能垂直滚动
        colHeaders: ['科目编码', '费用事项名称', '操作'], // 列标题
        rowHeaders: true, // 列标题
        stretchH: 'all',
        stretchW: 'all',
        manualColumnMove: true, // 可拖动
        manualRowMove: true,
        autoColumnSize: true,
        manualColumnResize: true, // 可自定义列宽
        manualRowResize: true, // 可自定义行宽
        manualRowFreeze: true, // 可手动固定某一行
        manualColumnFreeze: true, // 可手动固定某一列
        height: '500', // 表格高度
        width: '500', // 表格宽度
        // colWidths: 90, // 列宽
        // columns: [
        //   {
        //     wordWrap: true
        //   }
        // ],
        contextMenu: true,
        currentRowClassName: '测试',
        fillHandle: 'vertical',
        licenseKey: 'non-commercial-and-evaluation',
        columnSorting: false,
        renderAllRows: false,
        startRows: 15,
        mergeCells: true
      },
      language: 'zh-CN'
    }
  }
}
</script>
